<template>
	<view>
		<view @click="onChooseAvatar" class="headerImage">
			<text style="padding-left:30rpx">头像</text>
			<view style="display: flex;align-items: center;">
				<image class="avatar-wrapper" :src="userInfo.Icon?userInfo.Icon:userUrl" mode="aspectFit"></image>
				<uni-icons type="arrowright" color="rgb(187, 187, 187)"></uni-icons>
			</view>
		</view>

		<uni-list style="margin-top: 10px;position: relative;">
			<uni-list-item clickable @click="toEditUserInfo('姓名')" showArrow title="姓名" :rightText="userInfo.Name" />
			<uni-list-item clickable @click="toChangePhone" showArrow title="手机号" :rightText="userInfo.Phone" />
			<uni-list-item clickable @click="toEditUserInfo('地址')" showArrow title="地址" :rightText="userInfo.Address" />
			<uni-list-item clickable @click="toEditUserInfo('邮箱')" showArrow title="邮箱" :rightText="userInfo.Email" />
		</uni-list>
		<uni-popup ref="popup" type="bottom">
			<view style="padding: 10rpx;">
				<button @click="upclick('拍照')">拍照</button>
				<button style="margin-top: 10rpx;" @click="upclick('相册选取')">相册选取</button>
			</view>
		</uni-popup>
		<AuthCamera ref="AuthCamera" type="top" @changeAuthCamera="changeAuthCamera" :permissionID="permissionIDAuthCamera" />
		<AuthPhoto ref="AuthPhoto" type="top" @changeAuthPhoto="changeAuthPhoto" :permissionID="permissionIDAuthPhoto" />
	</view>
</template>

<script>
	import AuthCamera from "@/components/yk-authpup/AuthCamera.vue";
	import AuthPhoto from "@/components/yk-authpup/AuthPhoto.vue";
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			AuthCamera,
			AuthPhoto
		},
		data() {
			return {
				permissionIDAuthCamera: "CAMERA",
				permissionIDAuthPhoto: 'READ_EXTERNAL_STORAGE',
				// 当前版本号
				nowVersion: "1.5.3",
				rules: {},
				formData: {},
				userInfo: {},
				userUrl: ''
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.$http('Base_Manage/Home/GetAppOperatorInfo').then(res => {
				if (res.Success) uni.setStorageSync('userInfo', res.Data)
				this.userInfo = uni.getStorageSync('userInfo')
			})

			// #ifdef APP-PLUS
			// APP 获取本地应用资源版本号
			plus.runtime.getProperty(plus.runtime.appid, (info) => {
				this.nowVersion = 'v' + info.version;
			})
			// #endif
		},
		computed: {
			progress() {
				return ((this.userInfo.StorageByte - this.userInfo.ResidueMemory) / this.userInfo.StorageByte) * 100
			},
			...mapState(['UnreadTotal'])
		},
		methods: {
			// 相机权限使用说明子组件的方法
			changeAuthCamera() {

			},
			// 相册权限使用说明子组件的方法
			changeAuthPhoto() {

			},
			toCPage(e) {
				uni.navigateTo({
					url: '/pages/user/customerPage?Type=' + e
				})
			},
			// 注销
			cancellation() {
				uni.navigateTo({
					url: '/pages/user/cancellation'
				})
			},
			toNotice() {
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			},
			toChangePhone() {
				uni.navigateTo({
					url: '/pages/user/changePhone?phone=' + this.userInfo.Phone
				})
			},
			toMail() {
				uni.navigateTo({
					url: '/pages/Mail/Mail'
				})
			},
			// 修改个人信息
			toEditUserInfo(type) {  
				console.log(type);
				let url = ''
				if (type == '姓名') url = `type=text&value=${this.userInfo.Name||''}&key=Name&title=姓名`
				else if (type == '手机号') url = `type=number&value=${this.userInfo.Phone||''}&key=Phone&title=手机号`
				else if (type == '地址') url = `type=text&value=${this.userInfo.Address||''}&key=Address&title=地址`
				else if (type == '邮箱') url = `type=text&value=${this.userInfo.Email||''}&key=Email&title=邮箱`
				uni.navigateTo({
					url: '/pages/user/editUserInfo?' + url
				})
			},
			logOut() {
				uni.removeStorageSync('loginStates');
				uni.removeStorageSync('userName');
				uni.removeStorageSync('password');
				uni.removeStorageSync('customerInfoSelect');
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			// 用户头像
			onChooseAvatar(e) {
				this.$refs.popup.open()

			},
			//拍照和相册选择
			upclick(type) {
				var that = this
				let sourceType = ""
				if (type === '拍照') {
					sourceType = "camera"
					setTimeout(() => {
						that.$refs['AuthCamera'].open();
					}, 500)
				} else {
					sourceType = "album"
					setTimeout(() => {
						that.$refs['AuthPhoto'].open();
					}, 500)
				}
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: [sourceType], //这要注意，camera掉拍照，album是打开手机相册
					success: (rst) => {
						uni.navigateTo({
							url: '/pages/user/camera?path=' + encodeURIComponent(rst
								.tempFilePaths[0])
						})
					}
				});
				that.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uni-list-item__extra-text {
		max-width: 250px;
	}

	/deep/.uni-badge {
		min-width: 24px;
		height: 24px;
		line-height: 2;
	}

	.headerImage {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 8px;

		&:active {
			background-color: #f1f1f1;
		}
	}

	.avatar-wrapper {
		margin: 10px 0 0 10px;
		border: 1px solid #ccc;
		padding: 10rpx;
		background-color: transparent;
		width: 70px;
		height: 70px;
		border-radius: 5px;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>